<!-- directive:title 提示信息展示样式 -->
<!-- directive:breadcrumb 提示信息 -->
<div class='panel-body'>
  <p>Select a tab by setting active binding to true:</p>
  <p>
    <button type="button" class="btn btn-default btn-sm" ng-click="active = 1">Select second tab</button>
    <button type="button" class="btn btn-default btn-sm" ng-click="active = 2">Select third tab</button>
  </p>
  <p>
    <button type="button" class="btn btn-default btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable / Disable third tab</button>
  </p>
  <hr />

  <uib-tabset active="active">
    <uib-tab index="0" heading="Static title">Static content</uib-tab>
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled">
      {{tab.content}}
    </uib-tab>
    <uib-tab index="3" select="alertMe()">
      <uib-tab-heading>
        <i class="glyphicon glyphicon-bell"></i> Alert!
      </uib-tab-heading>
      I've got an HTML heading, and a select callback. Pretty cool!
    </uib-tab>
  </uib-tabset>

  <hr />

  <uib-tabset active="activePill" vertical="true" type="pills">
    <uib-tab index="0" heading="Vertical 1">Vertical content 1</uib-tab>
    <uib-tab index="1" heading="Vertical 2">Vertical content 2</uib-tab>
  </uib-tabset>

  <hr />

  <uib-tabset active="activeJustified" justified="true">
    <uib-tab index="0" heading="Justified">Justified content</uib-tab>
    <uib-tab index="1" heading="SJ">Short Labeled Justified content</uib-tab>
    <uib-tab index="2" heading="Long Justified">Long Labeled Justified content</uib-tab>
  </uib-tabset>

  <hr />

  Tabbed pills with CSS classes
  <uib-tabset type="pills">
    <uib-tab heading="Default Size">Tab 1 content</uib-tab>
    <uib-tab heading="Small Button" classes="btn-sm">Tab 2 content</uib-tab>
  </uib-tabset>

  <hr />

  Tabs using nested forms:
  <form name="outerForm" class="tab-form-demo">
    <uib-tabset active="activeForm">
      <uib-tab index="0" heading="Form Tab">
        <ng-form name="nestedForm">
          <div class="form-group">
            <label>Name</label>
            <input type="text" class="form-control" required ng-model="model.name"/>
          </div>
        </ng-form>
      </uib-tab>
      <uib-tab index="1" heading="Tab One">
        Some Tab Content
      </uib-tab>
      <uib-tab index="2" heading="Tab Two">
        More Tab Content
      </uib-tab>
    </uib-tabset>
  </form>
  Model:
  <pre>{{ model | json }}</pre>
  Nested Form:
  <pre>{{ outerForm.nestedForm | json }}</pre>
  <pre>选项卡指令的AngularJS版本。

uib-tabset设置
active  （默认值：Index of first tab） -选项卡的活跃指数。将此设置为现有选项卡索引将使该选项卡处于活动状态。

justified $  （默认值：false） -无论标签填充容器，并具有一致的宽度。

template-url （缺省：uib/template/tabs/tabset.html） -表示要使用的主要成分的模板的位置的URL。
type （默认值：tabs） -导航类型。可能的值是'tabs'和'pills'。

vertical $  （默认值：false） -无论是卡出现垂直堆叠。

uib-tab设置
classes $ - 可选的空格分隔的CSS类字符串。

deselect() $ - 禁用选项卡时调用的可选表达式。支持$event和$selectedIndex模板表达。您可以调用$event.preventDefault()此事件处理程序以防止发生制表符更改。该$selectedIndex可用于确定哪些选项卡试图打开。

disable $  （缺省：false） -无论标签是可点击的并且可以被激活。

heading - 标题文字。

index - 标签索引。必须是唯一的数字或字符串。

select() $ - 激活选项卡时调用的可选表达式。支持表达模板中的$ event。

template-url （默认值：uib/template/tabs/tab.html） -表示要使用的标签标题模板的位置的URL。

Tabset标题
您可以在tabset中使用一个元素，而不是该heading属性，该元素将用作tabset的标题。在那里你也可以使用HTML。uib-tabsetuib-tab-heading

已知的问题
要在选项卡中使用可单击元素，您必须覆盖选项卡模板以使用div元素而不是锚元素，并从Bootstrap的CSS复制所需的样式。这是因为浏览器将锚元素解释为任何单击事件的目标，当某些元素（如按钮）嵌套在锚元素内时触发路由。</pre>
</div>

